import React from "react";

import useCount from "./hooks/useCount";
import useList from "./hooks/useList";

const Child = () => {
  const [count, add, minus] = useCount(20);
  return (
    <>
      <h3>child子组件</h3>
      <button onClick={minus}>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>
    </>
  );
};

const App = () => {
  const [count, add, minus] = useCount(10);
  const list = useList();

  return (
    <>
      <h2>自定义hooks</h2>
      <button onClick={minus}>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>

      <hr />

      <ul>
        {list.map((item, index) => {
          return (
            <li key={index}>
              {item.properties.name} - {item.properties.value}
            </li>
          );
        })}
      </ul>

      <hr />

      <Child />
    </>
  );
};

export default App;
